{% block sw_payment_card %}
<mt-card
    position-identifier="sw-payment-card"
    class="sw-payment-card"
    :title="paymentMethod.translated.distinguishableName"
>
    <div class="sw-payment-card_content">

        {% block sw_payment_card_preview %}
        <img
            v-if="previewUrl"
            class="sw-payment-card__preview"
            :src="previewUrl"
            :alt="paymentMethod.media.translated.alt"
        >
        {% endblock %}

        {% block sw_payment_card_description %}
        <div class="sw-payment-card__description">
            <span v-html="paymentMethod.translated.description"></span>
        </div>
        {% endblock %}

        {% block sw_payment_card_link %}
        <sw-internal-link
            :router-link="{ name: 'sw.settings.payment.detail', params: { id: paymentMethod.id }}"
            :disabled="!acl.can('payment.editor') || undefined"
            hide-icon
        >
            {{ $tc('sw-settings-payment.overview.editDetails') }}
        </sw-internal-link>
        {% endblock %}

        {% block sw_payment_card_toggle %}

        <mt-switch
            v-tooltip="{ message: $tc('sw-settings-payment.overview.missingEditorPermission'), disabled: acl.can('payment.editor') }"
            :model-value="paymentMethod.active"
            :disabled="!acl.can('payment.editor') || undefined"
            :label="$tc('sw-settings-payment.overview.activeToggle')"
            @update:model-value="setPaymentMethodActive"
        />
        {% endblock %}

    </div>
</mt-card>
{% endblock %}
